<template>
    <div class="block">
      <el-carousel height="400px">
        <el-carousel-item v-for="(item, index) in images" :key="index">
          <img :src="item.src" alt="" class="carousel-image">
        </el-carousel-item>
      </el-carousel>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        images: [
          { src: 'http://p1.music.126.net/n0Vf1WBgLH3uryaq5aIPdw==/109951169731924173.jpg?imageView&quality=89' },
          { src: 'http://p1.music.126.net/RtXhDobehFLZIZQqPKVgPg==/109951169731843574.jpg?imageView&quality=89' },
          { src: 'http://p1.music.126.net/0GcdHKqAqg4yPZ8eg3aeEQ==/109951169731854207.jpg?imageView&quality=89' },
          { src: 'http://p1.music.126.net/Ir5Zjm6RjTUR1jdcCf4GVg==/109951169731888800.jpg?imageView&quality=89' }
        ]
      };
    }
  };
  </script>
  
  
  <style scoped>
  .block{
    margin-top: 10px;
  }
  .carousel-image {
    width: 100%; /* 让图片宽度充满轮播项 */
    height: 100%; /* 让图片高度充满轮播项 */
    object-fit: cover; /* 保持图片宽高比并填充容器 */
  }
  </style>
  